<!-- 模板 -->
<template>
  <div class="root">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img src="http://42.192.80.102/Printing man-img/back1.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="http://42.192.80.102/Printing man-img/haibao.png" alt=""
      /></van-swipe-item>
    </van-swipe>
    <div class="menu">
      <div class="menu-btn">
        <div class="menu-top">
          <div class="icon icon1">
            <img src="http://42.192.80.102/Printing man-img/wanou.png" alt="" />
          </div>
        </div>
        <div class="menu-buttom">{{ icon1 }}</div>
      </div>
      <div class="menu-btn">
        <div class="menu-top">
          <div class="icon icon2">
            <img src="http://42.192.80.102/Printing man-img/write.png" alt="" />
          </div>
        </div>
        <div class="menu-buttom">{{ icon2 }}</div>
      </div>
      <div class="menu-btn">
        <div class="menu-top">
          <div class="icon icon3">
            <img src="http://42.192.80.102/Printing man-img/qiye.png" alt="" />
          </div>
        </div>
        <div class="menu-buttom">{{ icon3 }}</div>
      </div>
      <div class="menu-btn">
        <div class="menu-top">
          <div class="icon icon4">
            <img
              src="http://42.192.80.102/Printing man-img/mingpian.png"
              alt=""
            />
          </div>
        </div>
        <div class="menu-buttom">{{ icon4 }}</div>
      </div>
      <div class="menu-btn">
        <div class="menu-top">
          <div class="icon icon5">
            <img
              src="http://42.192.80.102/Printing man-img/fuzhuang.png"
              alt=""
            />
          </div>
        </div>
        <div class="menu-buttom">{{ icon5 }}</div>
      </div>
    </div>
    <div class="recommend">
      <h3>为你推荐</h3>
      <div class="recommend_goods">
        <ul>
          <li>
            <img
              src="http://42.192.80.102/Printing man-img/superman1.png"
              alt=""
            />
            <p>马克杯</p>
            <span>Flat White</span>
            <span class="price">￥28</span>
          </li>
          <li>
            <img
              src="http://42.192.80.102/Printing man-img/chaoren1.png"
              alt=""
            />
            <p>随身杯</p>
            <span>Cappuccino</span>
            <span class="price">￥25</span>
          </li>
          <li>
            <img src="http://42.192.80.102/Printing man-img/card1.png" alt="" />
            <p>鼠标垫</p>
            <span>Daily Nuts 25g</span>
            <span class="price">￥4.55 <a href="##">￥6.9</a></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="report">
      <div class="report_title">
        <h3>媒体报告</h3>
        <a href="##">更多</a>
      </div>
      <div class="report_img">
        <img src="http://42.192.80.102/Printing man-img/haibao.png" alt="" />
        <img src="http://42.192.80.102/Printing man-img/back1.png" alt="" />
        <img src="http://42.192.80.102/Printing man-img/haibao.png" alt="" />
        <img src="http://42.192.80.102/Printing man-img/back1.png" alt="" />
      </div>
    </div>
    <div class="image_goods">
      <div class="image_goods_title">
        <h3>形象酷</h3>
        <span>更多</span>
      </div>
      <div class="image_goods_details">
        <ul>
          <li v-for="item in list" :key="item.id">
            <img :src="item.imgUrl" alt="" />
            <div class="goods_txt">
              <p>{{ item.name }}</p>
              <span>￥{{ item.price }}</span>
              <a href="##">已售卖{{ item.details }}件</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- <div class="box">
      <div class="box_item" v-for="item in list" :key="item.id">
        <div><img :src="item.imgUrl" alt="" /></div>
      </div>
    </div> -->
  </div>
</template>
<script>
import request from "../utils/request.js";
export default {
  name: "",
  data() {
    return {
      list: [],
      icon1: "图像logo",
      icon2: "字体logo",
      icon3: "企业定制",
      icon4: "名片定制",
      icon5: "服装定制",
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    async getUserList() {
      let options = {
        url: "users/userList",
        type: "get",
        data: {
          id: 1,
        },
      };
      try {
        let { data: res } = await request(options);
        if (res.meta.status !== 200) {
          return console.log(res.meta.msg);
        }
        console.log(res);
        this.list = res.data;
      } catch (error) {
        console.log(error);
      }
    },
  },
  created() {},
  mounted() {
    this.getUserList();
  },
};
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
.root {
  padding: 0.2rem;
  .van-swipe {
    display: flex;
    .van-swipe-item {
      img {
        width: 7.1rem;
        height: 3.66rem;
      }
    }
  }
  .menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.32rem;
    .menu-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 1.12rem;
      height: 1.4rem;
      .menu-top {
        .icon {
          width: 1.12rem;
          height: 1.12rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          img {
            width: 0.6rem;
          }
        }
        .icon1 {
          background: linear-gradient(#f45c82, #f071a8);
          img {
            width: 0.68rem;
          }
        }
        .icon2 {
          background: linear-gradient(#ac71db, #cf92d8);
        }
        .icon3 {
          background: linear-gradient(#fd9a87, #faac85);
        }
        .icon4 {
          background: linear-gradient(#c4c4c4, #8fd4f2, #8be9cf);
        }
        .icon5 {
          background: linear-gradient(#c36df2, #df71e1);
        }
      }
      .menu-buttom {
        margin-top: 0.08rem;
        font-size: 0.2rem;
      }
    }
  }
  .recommend {
    margin-top: 0.32rem;
    display: flex;
    flex-direction: column;
    h3 {
      font-size: 0.32rem;
      font-weight: 800;
      margin-bottom: 0.2rem;
    }
    .recommend_goods {
      ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        li {
          display: flex;
          flex-direction: column;
          img {
            width: 2.26rem;
            height: 2.08rem;
          }
          p {
            padding-top: 0.05rem;
            font-size: 0.22rem;
          }
          span {
            padding-top: 0.1rem;
            font-size: 0.18rem;
          }
          .price {
            font-size: 0.22rem;
            padding-top: 0.2rem;
            color: #e78c42;
            a {
              padding-left: 0.2rem;
              font-size: 0.2rem;
              color: #dcdcdc;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }
  .report {
    margin-top: 0.32rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    ::-webkit-scrollbar {
      display: none;
    }
    .report_title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h3 {
        font-size: 0.32rem;
        font-weight: 800;
      }
      a {
        font-size: 0.24rem;
        color: #000;
      }
    }
    .report_img {
      margin-top: 0.24rem;
      width: 100%;
      overflow: auto;
      display: flex;
      align-items: center;
      img {
        width: 4.2rem;
        height: 2.62rem;
        padding-right: 0.14rem;
      }
    }
  }
  .image_goods {
    margin-top: 0.32rem;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.8rem;
    .image_goods_title {
      margin-bottom: 0.24rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h3 {
        font-size: 0.32rem;
        font-weight: 800;
      }
      span {
        font-size: 0.24rem;
      }
    }
    .image_goods_details {
      ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 3.48rem;
          height: 3.76rem;
          margin-bottom: 0.16rem;
          border-radius: 0.12rem;
          box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.1);
          overflow: hidden;
          img {
            width: 100%;
          }
          .goods_txt {
            display: flex;
            flex-direction: column;
            padding-top: 0.12rem;
            padding-left: 0.12rem;
            p {
              font-size: 0.22rem;
            }
            span {
              padding-top: 0.08rem;
              font-size: 0.28rem;
            }
            a {
              font-size: 0.22rem;
              color: #b1b1b1;
            }
          }
        }
      }
    }
  }
}
</style>
